iT邦幫忙

2022 iThome 鐵人賽

DAY 5
0
Modern Web

訂單網頁嘗試集系列 第 5

{Day5} 小公主訂單網頁嘗試集_第五集_網頁標題建立+icon

  • 分享至 

  • xImage
  •  

小公主頻道邁入第五天ㄌ

當進入網頁映入眼簾的最上方,就是我們的標題,言簡意賅的標題對任何網站來說都十分重要,畢竟在分頁海裡,一目瞭然的找到想要的分頁,精確的標題一定是不可或缺的!

首先我們來命名網頁標題

分頁標題程式碼:

<title> 標題 </title>

程式實作:

<!DOCTYPE html>
<html>
    <head>
       <title>little_princess_web</title>
    </head>
    <body>

    </body>
</html>

既然都在分頁標題了,就連同代表小公主的icon皇冠一起打上去好了!

Icon 貼心小提醒,因為圖檔容易過大,尺寸用16x16就好囉!檔案也建議使用.ico檔
如果想直接從網頁上找適合的icon可以直接從下面的網址下載就可以了
https://favicon.io/

Icon 程式碼:

       <link rel="icon" href="./favicon.ico" type="image/x-icon"/>

程式實作:

<!DOCTYPE html>
<html>
    <head>
       <title>little_princess_web</title>
       <link rel="icon" href="./favicon.ico" type="image/x-icon"/>
    </head>
    <body>

    </body>
</html>

網頁呈現:

https://ithelp.ithome.com.tw/upload/images/20220920/201514237M29tRxgMv.png

既然都顯示網址了!就來科普網址小知識好了!
首先127.00.1表示本地主機,也就是這台電腦
5500是port number,翻譯成連接埠,表示電腦作業系統中扮成通訊的端點,通常和主機ip位置有關,白話文來說,ip位置是地址,port number 就是門了!
斜線後面就是html檔案的名稱

參考來源:
https://www.youtube.com/watch?v=qz0aGYrrlhU
https://sites.google.com/site/wangjiwanglumingcijieshao/home/127-0-0-1
https://bubble727.pixnet.net/blog/post/3909231
https://www.webdesigns.com.tw/webdesign_favicon.asp


上一篇
{Day4} 小公主訂單網頁嘗試集_第四集_html 打出第一行
下一篇
{Day6} 小公主訂單網頁嘗試集_第六集_圖片插入+大小調整
系列文
訂單網頁嘗試集30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言